import { NativeProps } from '../../utils/native-props'

type NativeInputProps = React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>

type AriaProps = {
  // These props currently are only used internally. They are not exported to users:
  role?: string
}

/** https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#%E5%B1%9E%E6%80%A7 */
export type InputProps = Pick<
  NativeInputProps,
  | 'autoComplete'
  | 'autoFocus'
  | 'autoCapitalize'
  | 'autoCorrect'
  | 'disabled'
  | 'id'
  | 'inputMode'
  /** input 中，`minLength` `maxlength` 只在 type 为 text, search, url, tel, email, password 时生效 */
  | 'maxLength'
  | 'minLength'
  | 'name'
  | 'onFocus'
  | 'onBlur'
  | 'onKeyDown'
  | 'onKeyUp'
  | 'onCompositionStart'
  | 'onCompositionEnd'
  | 'onClick'
  | 'pattern'
  | 'placeholder'
  | 'readOnly'
  | 'step'
  | 'type'
> & {
  /** 是否启用清除图标，点击清除图标后会清空输入框. default: `false` */
  clearable?: boolean
  /** 默认值. default: `''` */
  defaultValue?: string
  /** 允许您改变虚拟键盘上 "Enter"（输入键）的外观。 default: - */
  enterKeyHint?:
  | 'enter'
  | 'done'
  | 'go'
  | 'next'
  | 'previous'
  | 'search'
  | 'send'
  /** 自定义图标. default: - */
  icon?: React.ReactNode
  /** mode === 'label' 时, Input组件上方显示内容. default: '请输入' */
  label?: string
  min?: number
  max?: number
  /** Input 模式. default: 'default' */
  mode?: 'label' | 'default'
  /** if `true` 只有输入框聚焦时才会显示清除按钮；如果为 false，那么输入框失去焦点后依旧会显示清除按钮. default: `true` */
  onlyShowClearWhenFocus?: boolean
  /** 点击清除按钮后触发. default: - */
  onClear?: () => void
  /** 按下回车键触发 */
  onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void
  /** 输入框内容变化时触发. default: - */
  onChange?: (val: string) => void
  /** 输入值. default: - */
  value?: string,
} & NativeProps<
  /** input背景色 */
  | '--background-color'
  /** 字号. default: 14px */
  | '--font-size'
  /** 文字颜色. default: `--rt-color-text` */
  | '--color'
  /** placeholder 文字颜色. default: `--rt-color-light` */
  | '--placeholder-color'
  /** label 文字颜色. default: `--rt-color-light` */
  | '--label-color'
  /** 文字对齐方式. default: `left` */
  | '--text-align'
> & AriaProps

export type InputRef = {
  /** 清空 */
  clear: () => void
  /** 获取焦点 */
  focus: () => void
  /** 失去焦点 */
  blur: () => void
  /** 原始 input 元素 */
  nativeElement: HTMLInputElement | null
}
